<template>
  <div class="app-container">
    <div class="center-btn">
      <el-button
        type="primary"
        size="large"
        icon="el-icon-magic-stick"
        @click="startPopupLoop"
        :disabled="isLooping"
      >
        {{ isLooping ? '好想好想你...' : '想你了' }}
      </el-button>
    </div>

    <div
      v-for="(popup, index) in popups"
      :key="index"
      class="custom-popup"
      :style="{
        left: popup.left + 'px',
        top: popup.top + 'px',
        backgroundColor: popup.color,
        opacity: popup.opacity,
        transition: 'opacity 1.5s ease-in-out'
      }"
    >
      {{ popup.message }}
    </div>
  </div>
</template>

<script>
export default {
  name: "RandomPopup",
  data() {
    return {
      popups: [],
      isLooping: false,
      loopTimer: null,
      endTimer: null,
      // 扩充到30条语句
      messages: [
        "我想你了",
        "今天怎么样",
        "记得多喝水",
        "要开心呀",
        "早点休息",
        "加油哦",
        "今天也要努力",
        "天气真好",
        "想和你聊天",
        "你真可爱",
        "元气满满！",
        "别emo啦~",
        "好好吃饭",
        "你超棒的",
        "平安喜乐",
        "今天也爱你",
        "一起散步吧",
        "笑一个呀",
        "别太累啦",
        "我在呢",
        "万事顺意",
        "未来可期",
        "好运连连",
        "超喜欢你",
        "记得微笑",
        "人间值得",
        "有你真好",
        "今天也很甜",
        "慢慢变好",
        "常联系呀"
      ],
      colors: [
        "rgba(255, 183, 197, 0.9)",
        "rgba(175, 238, 238, 0.9)",
        "rgba(204, 255, 204, 0.9)",
        "rgba(255, 255, 204, 0.9)",
        "rgba(221, 160, 221, 0.9)",
        "rgba(255, 228, 196, 0.9)",
        "rgba(188, 210, 238, 0.9)",
        "rgba(238, 210, 238, 0.9)",
        "rgba(255, 218, 185, 0.9)",
        "rgba(200, 230, 201, 0.9)"
      ]
    };
  },
  methods: {
    startPopupLoop() {
      this.isLooping = true;
      this.popups = [];
      clearTimeout(this.loopTimer);
      clearTimeout(this.endTimer);

      // 弹窗速度提升到每150毫秒一个（15秒内约100个弹窗）
      const loopInterval = 150;
      this.loopTimer = setInterval(() => {
        this.createRandomPopup();
      }, loopInterval);

      // 持续15秒后开始渐退
      const totalDuration = 15000;
      this.endTimer = setTimeout(() => {
        clearInterval(this.loopTimer);
        this.startFadeOut();
      }, totalDuration);
    },

    createRandomPopup() {
      const windowWidth = window.innerWidth;
      const windowHeight = window.innerHeight;
      const popupWidth = 160; // 弹窗宽度缩小，更密集
      const popupHeight = 60;

      const randomLeft = Math.floor(Math.random() * (windowWidth - popupWidth));
      const randomTop = Math.floor(Math.random() * (windowHeight - popupHeight));

      const randomMsg = this.messages[Math.floor(Math.random() * this.messages.length)];
      const randomColor = this.colors[Math.floor(Math.random() * this.colors.length)];

      this.popups.push({
        left: randomLeft,
        top: randomTop,
        message: randomMsg,
        color: randomColor,
        opacity: 1
      });
    },

    startFadeOut() {
      // 加快渐退间隔（每50毫秒一个）
      this.popups.forEach((popup, index) => {
        setTimeout(() => {
          popup.opacity = 0;
        }, index * 50);
      });

      setTimeout(() => {
        this.popups = [];
        this.isLooping = false;
      }, this.popups.length * 50 + 1500);
    }
  },
  beforeDestroy() {
    clearInterval(this.loopTimer);
    clearTimeout(this.endTimer);
  }
};
</script>

<style scoped>
.app-container {
  position: relative;
  min-height: 100vh;
  background-color: #f9f9f9;
  overflow: hidden;
}

.center-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
}

.custom-popup {
  position: absolute;
  width: 160px;
  padding: 10px 12px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  color: #333;
  font-size: 13px;
  text-align: center;
  z-index: 999;
  word-break: break-all;
  pointer-events: none;
}
</style>
